<template>
    <a-modal :confirm-loading="modalOption.loading" :okText="modalOption.okText" @ok="modalOption.onOk"
             @cancel="modalOption.onCancel" :cancelText="modalOption.cancelText" :width="modalOption.width" :visible="visible"
             :title="modalOption.title">
       <a-spin tip="Loading..." :spinning="loading">
           <div class="container">
               <a-form-model ref="formModel" :label-col="formOption.labelCol" :wrapper-col="formOption.wrapperCol"
                             :layout="formOption.layout" :label-align="formOption.labelAlign" :hide-required-mark="formOption.hideRequiredMark"
                             :rules="formOption.rules" :model="formOption.formData">
                   <div class="table">
                       <a-card title="颗粒/提取物信息" hoverable>
                           <div class="tool-bar">
                               <a-row>
                                   <a-col :span="6">
                                       <a-form-model-item label="库存类型" prop="materialType">
                                           <a-select :disabled="disabledEdit" @change="materialTypeChange" class="inputs" allowClear v-model="formOption.formData.materialType" placeholder="库存类型">
                                               <a-select-option
                                                   v-for="(item,i) in [{name:'提取物',value:'提取物'},{name:'配方颗粒(颗粒)',value:'配方颗粒(颗粒)'}]"
                                                   :key="i"
                                                   :value="item.value">{{item.name}}</a-select-option>
                                           </a-select>
                                       </a-form-model-item>
                                   </a-col>
                                   <a-col :span="6">
                                       <a-form-model-item label="标准类型" prop="categoryCode">
                                           <a-select class="inputs" allowClear v-model="formOption.formData.categoryCode" placeholder="标准类型">
                                               <a-select-option
                                                   v-for="(item,i) in ['国标','省标','省标-北京','省标-上海']"
                                                   :key="i"
                                                   :value="item">{{item}}</a-select-option>
                                           </a-select>
                                       </a-form-model-item>
                                   </a-col>
                                   <a-col :span="6">
                                       <a-form-model-item label="品名" prop="materialName">
                                           <a-select :disabled="disabledEdit" @change="materialIdChange" class="inputs" allowClear v-model="formOption.formData.materialName" placeholder="品名">
                                               <a-select-option
                                                   v-for="(item,i) in searchSource.materialNameList"
                                                   :key="i"
                                                   :value="item.id">{{item.name}}</a-select-option>
                                           </a-select>
                                       </a-form-model-item>
                                   </a-col>
                                   <a-col :span="6">
                                       <a-form-model-item label="颗粒批号" prop="keLiBatch">
                                           <a-input class="inputs" allowClear v-model="formOption.formData.keLiBatch" placeholder="颗粒批号"></a-input>
                                       </a-form-model-item>
                                   </a-col>
                                   <a-col :span="6">
                                       <a-form-model-item label="颗粒结存量(kg)" prop="stockNumSys">
                                           <a-input class="inputs" allowClear v-model="formOption.formData.stockNumSys" placeholder="颗粒结存量(kg)"></a-input>
                                       </a-form-model-item>
                                   </a-col>
                               </a-row>
                           </div>
                       </a-card>
                       <a-card class="table" title="结存和结存状态" hoverable>
                           <div class="tool-bar">
                               <a-row>
                                   <a-col :span="6">
                                       <a-form-model-item label="质量状态（颗粒）" prop="qualityStatusKeLi">
                                           <a-select class="inputs" allowClear v-model="formOption.formData.qualityStatusKeLi" placeholder="质量状态（颗粒）">
                                               <a-select-option
                                                   v-for="(item,i) in ['可用','不可用']"
                                                   :key="i"
                                                   :value="item">{{item}}</a-select-option>
                                           </a-select>
                                       </a-form-model-item>
                                   </a-col>
                                   <a-col :span="6">
                                       <a-form-model-item label="总混一(质量状态)" prop="qualityStatusOne">
                                           <a-select class="inputs" allowClear v-model="formOption.formData.qualityStatusOne" placeholder="总混一(质量状态)">
                                               <a-select-option
                                                   v-for="(item,i) in ['可用','不可用']"
                                                   :key="i"
                                                   :value="item">{{item}}</a-select-option>
                                           </a-select>
                                       </a-form-model-item>
                                   </a-col>
                                   <a-col :span="6">
                                       <a-form-model-item label="提取物库存类型" prop="jgfType">
                                           <a-radio-group v-model="formOption.formData.jgfType">
                                               <a-radio value="过筛">过筛</a-radio>
                                               <a-radio value="总混一">总混一</a-radio>
                                           </a-radio-group>
                                       </a-form-model-item>
                                   </a-col>
                                   <a-col :span="6" v-if="formOption.formData.jgfType == '过筛'">
                                       <a-form-model-item label="过筛(kg)" prop="screen">
                                           <!--  TODO 先将总混1的库存换位颗粒结存量的字段 stockNumSys  等待产品询问 -->
                                           <a-input class="inputs" allowClear v-model="formOption.formData.stockNumSys" placeholder="过筛(kg)"></a-input>
                                       </a-form-model-item>
                                   </a-col>
                                   <a-col :span="6" v-if="formOption.formData.jgfType == '总混一'">
                                       <a-form-model-item label="总混一(kg)" prop="zhOne">
                                    <!--  TODO 先将总混1的库存换位颗粒结存量的字段 stockNumSys  等待产品询问 -->
                                           <a-input class="inputs" allowClear v-model="formOption.formData.stockNumSys" placeholder="总混一(kg)"></a-input>
                                       </a-form-model-item>
                                   </a-col>
                               </a-row>
                           </div>
                           <div class="tool-bar">
                               <a-row>

                                   <a-col :span="6">
                                       <a-form-model-item label="粉批号" prop="fBatch">
                                           <a-input class="inputs" allowClear v-model="formOption.formData.fBatch" placeholder="粉批号"></a-input>
                                       </a-form-model-item>
                                   </a-col>
                               </a-row>
                           </div>
                       </a-card>
                       <a-card class="table" title="过筛提取物" hoverable>
                           <a-card class="table" title="过筛提取物-过筛粉碎">
                               <div class="tool-bar">
                                   <a-row>
                                       <a-col :span="6">
                                           <a-form-model-item label="日期" prop="screenInTime">
                                               <a-date-picker
                                                   :locale="locale"
                                                   valueFormat="YYYY-MM-DD"
                                                   class="inputs"
                                                   allowClear
                                                   v-model="formOption.formData.screenInTime"
                                                   placeholder="日期"/>
                                           </a-form-model-item>
                                       </a-col>
                                       <a-col :span="6">
                                           <a-form-model-item label="kg/件" prop="screenInStorage">
                                               <a-input class="inputs" allowClear v-model="formOption.formData.screenInStorage" placeholder="kg/件"></a-input>
                                           </a-form-model-item>
                                       </a-col>
                                       <a-col :span="6">
                                           <a-form-model-item label="件数" prop="screenInStorageNum">
                                               <a-input class="inputs" allowClear v-model="formOption.formData.screenInStorageNum" placeholder="件数"></a-input>
                                           </a-form-model-item>
                                       </a-col>
                                       <a-col :span="6">
                                           <a-form-model-item label="零件" prop="screenInStorageSpare">
                                               <a-input class="inputs" allowClear v-model="formOption.formData.screenInStorageSpare" placeholder="零件"></a-input>
                                           </a-form-model-item>
                                       </a-col>
                                   </a-row>
                               </div>
                               <div class="tool-bar">
                                   <a-row>
                                       <a-col :span="6">
                                           <a-form-model-item label="重量(kg)" prop="screenInStorageWeight">
                                               <a-input class="inputs" allowClear v-model="formOption.formData.screenInStorageWeight" placeholder="重量(kg)"></a-input>
                                           </a-form-model-item>
                                       </a-col>
                                   </a-row>
                               </div>
                           </a-card>
                           <a-card class="table" title="过筛提取物-出库">
                               <div class="tool-bar">
                                   <a-row>
                                       <a-col :span="6">
                                           <a-form-model-item label="领用日期" prop="outTime">
                                               <a-date-picker
                                                   :locale="locale"
                                                   valueFormat="YYYY-MM-DD"
                                                   class="inputs"
                                                   allowClear
                                                   v-model="formOption.formData.outTime"
                                                   placeholder="领用日期"/>
                                           </a-form-model-item>
                                       </a-col>
                                       <a-col :span="6">
                                           <a-form-model-item label="混合领(kg)" prop="outKg">
                                               <a-input class="inputs" allowClear v-model="formOption.formData.outKg" placeholder="混合领(kg)"></a-input>
                                           </a-form-model-item>
                                       </a-col>
                                       <a-col :span="6">
                                           <a-form-model-item label="其他领(kg)" prop="outOther">
                                               <a-input class="inputs" allowClear v-model="formOption.formData.outOther" placeholder="其他领(kg)"></a-input>
                                           </a-form-model-item>
                                       </a-col>
                                   </a-row>
                               </div>
                           </a-card>
                           <div class="tool-bar table">
                               <a-row>
                                   <a-col :span="6">
                                       <a-form-model-item label="结存(过筛)kg" prop="balance">
                                           <a-input class="inputs" allowClear v-model="formOption.formData.balance" placeholder="结存(过筛)kg"></a-input>
                                       </a-form-model-item>
                                   </a-col>
                                   <a-col :span="6">
                                       <a-form-model-item label="过筛后粉位置" prop="backPosition">
                                           <a-input class="inputs" allowClear v-model="formOption.formData.backPosition" placeholder="过筛后粉位置"></a-input>
                                       </a-form-model-item>
                                   </a-col>
                                   <a-col :span="6">
                                       <a-form-model-item label="复检期" prop="recheckTime">
                                           <a-date-picker
                                               :locale="locale"
                                               valueFormat="YYYY-MM-DD"
                                               class="inputs"
                                               allowClear
                                               v-model="formOption.formData.recheckTime"
                                               placeholder="复检期"/>
                                       </a-form-model-item>
                                   </a-col>
                                   <a-col :span="6">
                                       <a-form-model-item label="备注1" prop="gsRemarkOne">
                                           <a-input class="inputs" allowClear v-model="formOption.formData.gsRemarkOne" placeholder="备注1"></a-input>
                                       </a-form-model-item>
                                   </a-col>
                               </a-row>
                           </div>
                       </a-card>
                       <a-card class="table" title="总混一" hoverable>
                           <a-card title="总混一-入库">
                               <div class="tool-bar">
                                   <a-row>
                                       <a-col :span="6">
                                           <a-form-model-item label="日期" prop="storageInTime">
                                               <a-date-picker
                                                   :locale="locale"
                                                   valueFormat="YYYY-MM-DD"
                                                   class="inputs"
                                                   allowClear
                                                   v-model="formOption.formData.storageInTime"
                                                   placeholder="日期"/>
                                           </a-form-model-item>
                                       </a-col>
                                       <a-col :span="6">
                                           <a-form-model-item label="批号" prop="storageInBatch">
                                               <a-input class="inputs" allowClear v-model="formOption.formData.storageInBatch" placeholder="批号"></a-input>
                                           </a-form-model-item>
                                       </a-col>
                                       <a-col :span="6">
                                           <a-form-model-item label="重量(kg)" prop="storageInWeight">
                                               <a-input class="inputs" allowClear v-model="formOption.formData.storageInWeight" placeholder="重量(kg)"></a-input>
                                           </a-form-model-item>
                                       </a-col>
                                   </a-row>
                               </div>
                           </a-card>
                           <a-card class="table" title="总混一-出库">
                               <div class="tool-bar">
                                   <a-row>
                                       <a-col :span="6">
                                           <a-form-model-item label="日期" prop="storageOutTime">
                                               <a-date-picker
                                                   :locale="locale"
                                                   valueFormat="YYYY-MM-DD"
                                                   class="inputs"
                                                   allowClear
                                                   v-model="formOption.formData.storageOutTime"
                                                   placeholder="日期"/>
                                           </a-form-model-item>
                                       </a-col>
                                       <a-col :span="6">
                                           <a-form-model-item label="重量(kg)" prop="storageOutWeight">
                                               <a-input class="inputs" allowClear v-model="formOption.formData.storageOutWeight" placeholder="重量(kg)"></a-input>
                                           </a-form-model-item>
                                       </a-col>
                                   </a-row>
                               </div>
                           </a-card>
                           <div class="tool-bar table">
                               <a-row>
                                   <a-col :span="6">
                                       <a-form-model-item label="混一结存(kg)" prop="balanceOne">
                                           <a-input class="inputs" allowClear v-model="formOption.formData.balanceOne" placeholder="混一结存(kg)"></a-input>
                                       </a-form-model-item>
                                   </a-col>
                                   <a-col :span="6">
                                       <a-form-model-item label="总混一后位置" prop="oneBackPosition">
                                           <a-input class="inputs" allowClear v-model="formOption.formData.oneBackPosition" placeholder="总混一后位置"></a-input>
                                       </a-form-model-item>
                                   </a-col>
                                   <a-col :span="6">
                                       <a-form-model-item label="失效期" prop="invalidTime">
                                           <a-date-picker
                                               :locale="locale"
                                               valueFormat="YYYY-MM-DD"
                                               class="inputs"
                                               allowClear
                                               v-model="formOption.formData.invalidTime"
                                               placeholder="失效期"/>
                                       </a-form-model-item>
                                   </a-col>
                                   <a-col :span="6">
                                       <a-form-model-item label="GMP报告数" prop="gmpReportNum">
                                           <a-input class="inputs" allowClear v-model="formOption.formData.gmpReportNum" placeholder="GMP报告数"></a-input>
                                       </a-form-model-item>
                                   </a-col>
                               </a-row>
                           </div>
                           <div class="tool-bar table">
                               <a-row>
                                   <a-col :span="6">
                                       <a-form-model-item label="备注1" prop="zhyRemarkOne">
                                           <a-input class="inputs" allowClear v-model="formOption.formData.zhyRemarkOne" placeholder="备注1"></a-input>
                                       </a-form-model-item>
                                   </a-col>
                               </a-row>
                           </div>
                       </a-card>
                       <a-card class="table" title="颗粒产出" hoverable>
                           <div class="tool-bar">
                               <a-row>
                                   <a-col :span="6">
                                       <a-form-model-item label="日期(制粒产出)" prop="zlProdTime">
                                           <a-date-picker
                                               :locale="locale"
                                               valueFormat="YYYY-MM-DD"
                                               class="inputs"
                                               allowClear
                                               v-model="formOption.formData.zlProdTime"
                                               placeholder="日期(制粒产出)"/>
                                       </a-form-model-item>
                                   </a-col>
                                   <a-col :span="6">
                                       <a-form-model-item label="颗粒批号" prop="zhyklBatch">
                                           <a-input class="inputs" allowClear v-model="formOption.formData.zhyklBatch" placeholder="颗粒批号"></a-input>
                                       </a-form-model-item>
                                   </a-col>
                                   <a-col :span="6">
                                       <a-form-model-item label="复检期" prop="klProdTime">
                                           <a-date-picker
                                               :locale="locale"
                                               valueFormat="YYYY-MM-DD"
                                               class="inputs"
                                               allowClear
                                               v-model="formOption.formData.klProdTime"
                                               placeholder="复检期"/>
                                       </a-form-model-item>
                                   </a-col>
                                   <a-col :span="6">
                                       <a-form-model-item label="类别/省份" prop="klProdProvince">
                                           <a-input class="inputs" allowClear v-model="formOption.formData.klProdProvince" placeholder="类别/省份"></a-input>
                                       </a-form-model-item>
                                   </a-col>
                               </a-row>
                           </div>
                           <div class="tool-bar">
                               <a-row>
                                   <a-col :span="6">
                                       <a-form-model-item label="kg/件" prop="klProdKg">
                                           <a-input class="inputs" allowClear v-model="formOption.formData.klProdKg" placeholder="kg/件"></a-input>
                                       </a-form-model-item>
                                   </a-col>
                                   <a-col :span="6">
                                       <a-form-model-item label="件数" prop="klProdNum">
                                           <a-input class="inputs" allowClear v-model="formOption.formData.klProdNum" placeholder="件数"></a-input>
                                       </a-form-model-item>
                                   </a-col>
                                   <a-col :span="6">
                                       <a-form-model-item label="零件(kg)" prop="klProdSpareKg">
                                           <a-input class="inputs" allowClear v-model="formOption.formData.klProdSpareKg" placeholder="零件(kg)"></a-input>
                                       </a-form-model-item>
                                   </a-col>
                                   <a-col :span="6">
                                       <a-form-model-item label="总重量(kg)" prop="klProdTotalWeight">
                                           <a-input class="inputs" allowClear v-model="formOption.formData.klProdTotalWeight" placeholder="总重量(kg)"></a-input>
                                       </a-form-model-item>
                                   </a-col>
                               </a-row>
                           </div>
                           <div class="tool-bar">
                               <a-row>
                                   <a-col :span="6">
                                       <a-form-model-item label="U8入账" prop="klProdU8">
                                           <a-input class="inputs" allowClear v-model="formOption.formData.klProdU8" placeholder="U8入账"></a-input>
                                       </a-form-model-item>
                                   </a-col>
                                   <a-col :span="6">
                                       <a-form-model-item label="GMP报告数" prop="klProdGmpReportNum">
                                           <a-input class="inputs" allowClear v-model="formOption.formData.klProdGmpReportNum" placeholder="GMP报告数"></a-input>
                                       </a-form-model-item>
                                   </a-col>
                               </a-row>
                           </div>
                       </a-card>
                       <a-card class="table" title="挥发油" hoverable>
                           <div class="tool-bar">
                               <a-row>
                                   <a-col :span="6">
                                       <a-form-model-item label="日期" prop="oilDate">
                                           <a-date-picker
                                               :locale="locale"
                                               valueFormat="YYYY-MM-DD"
                                               class="inputs"
                                               allowClear
                                               v-model="formOption.formData.oilDate"
                                               placeholder="日期"/>
                                       </a-form-model-item>
                                   </a-col>
                                   <a-col :span="6">
                                       <a-form-model-item label="工序总混/过筛" prop="oilTech">
                                           <a-input class="inputs" allowClear v-model="formOption.formData.oilTech" placeholder="工序总混/过筛"></a-input>
                                       </a-form-model-item>
                                   </a-col>
                                   <a-col :span="6">
                                       <a-form-model-item label="出库" prop="oilOut">
                                           <a-input class="inputs" allowClear v-model="formOption.formData.oilOut" placeholder="出库"></a-input>
                                       </a-form-model-item>
                                   </a-col>
                                   <a-col :span="6">
                                       <a-form-model-item label="入库" prop="oilIn">
                                           <a-input class="inputs" allowClear v-model="formOption.formData.oilIn" placeholder="入库"></a-input>
                                       </a-form-model-item>
                                   </a-col>
                               </a-row>
                           </div>
                       </a-card>
                       <a-card class="table" title="验证出库" hoverable>
                           <a-card class="table" title="分装C60/C80">
                               <div class="tool-bar">
                                   <a-row>
                                       <a-col :span="6">
                                           <a-form-model-item label="出库日期" prop="c68OutDate">
                                               <a-date-picker
                                                   :locale="locale"
                                                   valueFormat="YYYY-MM-DD"
                                                   class="inputs"
                                                   allowClear
                                                   v-model="formOption.formData.c68OutDate"
                                                   placeholder="日期"/>
                                           </a-form-model-item>
                                       </a-col>
                                       <a-col :span="6">
                                           <a-form-model-item label="重量kg" prop="c68Weight">
                                               <a-input class="inputs" allowClear v-model="formOption.formData.c68Weight" placeholder="重量kg"></a-input>
                                           </a-form-model-item>
                                       </a-col>
                                   </a-row>
                               </div>
                           </a-card>
                           <a-card class="table" title="分装C70/C90">
                               <div class="tool-bar">
                                   <a-row>
                                       <a-col :span="6">
                                           <a-form-model-item label="出库日期" prop="c79OutDate">
                                               <a-date-picker
                                                   :locale="locale"
                                                   valueFormat="YYYY-MM-DD"
                                                   class="inputs"
                                                   allowClear
                                                   v-model="formOption.formData.c79OutDate"
                                                   placeholder="日期"/>
                                           </a-form-model-item>
                                       </a-col>
                                       <a-col :span="6">
                                           <a-form-model-item label="重量kg" prop="c79Weight">
                                               <a-input class="inputs" allowClear v-model="formOption.formData.c79Weight" placeholder="重量kg"></a-input>
                                           </a-form-model-item>
                                       </a-col>
                                   </a-row>
                               </div>
                           </a-card>
                       </a-card>
                       <a-card class="table" title="大生产出库" hoverble>
                           <a-card class="table" title="分装C60">
                               <div class="tool-bar">
                                   <a-row>
                                       <a-col :span="6">
                                           <a-form-model-item label="分装C60日期" prop="c6Date">
                                               <a-date-picker
                                                   :locale="locale"
                                                   valueFormat="YYYY-MM-DD"
                                                   class="inputs"
                                                   allowClear
                                                   v-model="formOption.formData.c6Date"
                                                   placeholder="日期"/>
                                           </a-form-model-item>
                                       </a-col>
                                       <a-col :span="6">
                                           <a-form-model-item label="成品批号" prop="c6Batch">
                                               <a-input class="inputs" allowClear v-model="formOption.formData.c6Batch" placeholder="成品批号"></a-input>
                                           </a-form-model-item>
                                       </a-col>
                                       <a-col :span="6">
                                           <a-form-model-item label="重量kg" prop="c6Kg">
                                               <a-input class="inputs" allowClear v-model="formOption.formData.c6Kg" placeholder="重量kg"></a-input>
                                           </a-form-model-item>
                                       </a-col>
                                   </a-row>
                               </div>
                           </a-card>
                           <a-card class="table" title="分装C70">
                               <div class="tool-bar">
                                   <a-row>
                                       <a-col :span="6">
                                           <a-form-model-item label="分装C70日期" prop="c7Date">
                                               <a-date-picker
                                                   :locale="locale"
                                                   valueFormat="YYYY-MM-DD"
                                                   class="inputs"
                                                   allowClear
                                                   v-model="formOption.formData.c7Date"
                                                   placeholder="日期"/>
                                           </a-form-model-item>
                                       </a-col>
                                       <a-col :span="6">
                                           <a-form-model-item label="成品批号" prop="c7Batch">
                                               <a-input class="inputs" allowClear v-model="formOption.formData.c7Batch" placeholder="成品批号"></a-input>
                                           </a-form-model-item>
                                       </a-col>
                                       <a-col :span="6">
                                           <a-form-model-item label="重量kg" prop="c7Kg">
                                               <a-input class="inputs" allowClear v-model="formOption.formData.c7Kg" placeholder="重量kg"></a-input>
                                           </a-form-model-item>
                                       </a-col>
                                   </a-row>
                               </div>
                           </a-card>
                           <a-card class="table" title="分装C80">
                               <div class="tool-bar">
                                   <a-row>
                                       <a-col :span="6">
                                           <a-form-model-item label="分装C80日期" prop="c8Date">
                                               <a-date-picker
                                                   :locale="locale"
                                                   valueFormat="YYYY-MM-DD"
                                                   class="inputs"
                                                   allowClear
                                                   v-model="formOption.formData.c8Date"
                                                   placeholder="日期"/>
                                           </a-form-model-item>
                                       </a-col>
                                       <a-col :span="6">
                                           <a-form-model-item label="成品批号" prop="c8Batch">
                                               <a-input class="inputs" allowClear v-model="formOption.formData.c8Batch" placeholder="成品批号"></a-input>
                                           </a-form-model-item>
                                       </a-col>
                                       <a-col :span="6">
                                           <a-form-model-item label="重量kg" prop="c8Kg">
                                               <a-input class="inputs" allowClear v-model="formOption.formData.c8Kg" placeholder="重量kg"></a-input>
                                           </a-form-model-item>
                                       </a-col>
                                   </a-row>
                               </div>
                           </a-card>
                           <a-card class="table" title="分装C90">
                               <div class="tool-bar">
                                   <a-row>
                                       <a-col :span="6">
                                           <a-form-model-item label="分装C90日期" prop="c9Date">
                                               <a-date-picker
                                                   :locale="locale"
                                                   valueFormat="YYYY-MM-DD"
                                                   class="inputs"
                                                   allowClear
                                                   v-model="formOption.formData.c9Date"
                                                   placeholder="日期"/>
                                           </a-form-model-item>
                                       </a-col>
                                       <a-col :span="6">
                                           <a-form-model-item label="成品批号" prop="c9Batch">
                                               <a-input class="inputs" allowClear v-model="formOption.formData.c9Batch" placeholder="成品批号"></a-input>
                                           </a-form-model-item>
                                       </a-col>
                                       <a-col :span="6">
                                           <a-form-model-item label="重量kg" prop="c9Kg">
                                               <a-input class="inputs" allowClear v-model="formOption.formData.c9Kg" placeholder="重量kg"></a-input>
                                           </a-form-model-item>
                                       </a-col>
                                   </a-row>
                               </div>
                           </a-card>
                       </a-card>
                       <a-card class="table" title="其他出库" hoverble>
                           <div class="tool-bar">
                               <a-row>
                                   <a-col :span="6">
                                       <a-form-model-item label="其他出库日期" prop="otherOutDate">
                                           <a-date-picker
                                               :locale="locale"
                                               valueFormat="YYYY-MM-DD"
                                               class="inputs"
                                               allowClear
                                               v-model="formOption.formData.otherOutDate"
                                               placeholder="其他出库日期"/>
                                       </a-form-model-item>
                                   </a-col>
                                   <a-col :span="6">
                                       <a-form-model-item label="其他领" prop="otherGet">
                                           <a-input class="inputs" allowClear v-model="formOption.formData.otherGet" placeholder="其他领"></a-input>
                                       </a-form-model-item>
                                   </a-col>
                               </a-row>
                           </div>
                       </a-card>
                       <div class="tool-bar table">
                           <a-row>
                               <a-col :span="8">
                                   <a-form-model-item label="颗粒结存" prop="klBalance">
                                       <a-input class="inputs" allowClear v-model="formOption.formData.klBalance" placeholder="颗粒结存"></a-input>
                                   </a-form-model-item>
                               </a-col>
                               <a-col :span="8">
                                   <a-form-model-item label="颗粒存放位置" prop="klPosition">
                                       <a-input class="inputs" allowClear v-model="formOption.formData.klPosition" placeholder="颗粒存放位置"></a-input>
                                   </a-form-model-item>
                               </a-col>
                               <a-col :span="8">
                                   <a-form-model-item label="FS状态" prop="fsState">
                                       <a-input class="inputs" allowClear v-model="formOption.formData.fsState" placeholder="FS状态"></a-input>
                                   </a-form-model-item>
                               </a-col>
                           </a-row>
                       </div>
                       <a-card class="table" title="备注" hoverble>
                           <div class="tool-bar">
                               <a-row>
                                   <a-col :span="12">
                                       <a-form-model-item label="备注1" prop="remarkOne">
                                           <a-textarea class="inputs" allowClear v-model="formOption.formData.remarkOne" placeholder="备注1"></a-textarea>
                                       </a-form-model-item>
                                   </a-col>
                                   <a-col :span="12">
                                       <a-form-model-item label="备注2" prop="remarkTwo">
                                           <a-textarea class="inputs" allowClear v-model="formOption.formData.remarkTwo" placeholder="备注2"></a-textarea>
                                       </a-form-model-item>
                                   </a-col>
                               </a-row>
                           </div>
                       </a-card>
                   </div>
               </a-form-model>
           </div>
           <div slot="footer" style="text-align: center">
               <a-button size="large" @click="modalOption.onCancel">取 消</a-button>
               <a-button size="large" type="primary" @click="modalOption.onOk">确 定</a-button>
           </div>
       </a-spin>
    </a-modal>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import locale from "ant-design-vue/lib/date-picker/locale/zh_CN";
import nextApi from "@/api/nextApi";
import areaJson, {getAreaWords} from "@/utils/area";

@Component({})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: "" }) editId!: string;
    @Prop({ default: {} }) formData!: object;
    @Watch("visible")
    visibleChange(val) {
        if (val) {

        }else{
            //关闭弹窗初始化数据组
            this.searchSource = {
                materialNameList:[]
            };
            (this.$refs.formModel as any).resetFields()
        }
    }
    loading = false
    disabledEdit = false
    @Watch("editId",{immediate:true})
    editIdChange(val) {
        if (val) {
            console.log('id:',val)
            this.modalOption.title = `编辑`;
            this.disabledEdit = true
            this.getInfo()
        }else{
            this.modalOption.title = `新增`;
        }
    }

    //组件配置
    locale = locale;
    modalOption: any = {
        width: "90%",
        title: "新增",
        okText: "保存",
        cancelText: "取消",
        loading: false,
        onOk: () => {
            this.modalOk();
        },
        onCancel: () => {
            this.closeModal();
        },
    };

    //表单数据源
    searchSource:any = {
        materialNameList:[]
    }
    //表单配置
    formOption: any = {
        labelCol: { style: { width: "140px" } },
        wrapperCol: { style: {width:'calc(100% - 140px)'}},
        layout: "inline",
        labelAlign: "right",
        hideRequiredMark: false,
        formData: {},
        rules: {},
    };
    materialTypeChange(v){
        console.log('change',v)
        if(v){
            this.getMaterialNameList(v)
        }
        if(v === '配方颗粒(颗粒)'){
            this.formOption.rules = {
                materialType: [{ required: true, message: "请选择库存类型", trigger: "blur" }],
                categoryCode: [{ required: true, message: "请选择标准类型", trigger: "blur" }],
                materialName: [{ required: true, message: "请选择品名名称", trigger: "blur" }],
                keLiBatch: [{ required: true, message: "请输入颗粒批号"}],
                stockNumSys: [{ required: true, message: "请输入颗粒结存量"}],
                qualityStatusKeLi: [{ required: true, message: "请选择质量(颗粒)状态"}],
                klProdTime: [{ required: true, message: "请选择复检期"}],
            }
        }else{
            this.formOption.rules = {
                materialType: [{ required: true, message: "请选择库存类型", trigger: "blur" }],
                categoryCode: [{ required: true, message: "请选择标准类型", trigger: "blur" }],
                materialName: [{ required: true, message: "请选择品名名称", trigger: "blur" }],
                fBatch: [{ required: true, message: "请输入粉批号"}],
                jgfType: [{ required: true, message: "请选择库存类型"}],
                qualityStatusOne: [{ required: true, message: "请选择质量状态"}],
                recheckTime: [{ required: true, message: "请选择复检期"}],
            }
        }
    }
    materialIdChange(v){
        let find = this.searchSource.materialNameList.find(item=>item.id === v)
        if(find){
            this.formOption.formData.materialId = find.id
        }
    }
    /**
     * @description 查询一些数据
     * **/
    async getMaterialNameList(type){
        this.loading = true
        const res = await nextApi.selectMaterialListByType({materialType:type})
        this.searchSource.materialNameList = res.data
        this.loading = false
    }
    //查询详情后进行修改
    async getInfo(){
        this.formOption.formData = this.formData
        await this.materialTypeChange(this.formOption.formData.materialType)
    }
    //提交
    modalOk(){
        (this.$refs.formModel as any).validate(async (valid: boolean) => {
            if (valid) {
                this.modalOption.loading = true;
                try {
                    if(this.editId){
                        console.log(this.formOption.formData,'修改')
                        const res = await nextApi.productStorageUpdate(this.formOption.formData)
                        this.$message.success(res.msg)
                        this.$emit("closeModal")
                    }else{
                        console.log(this.formOption.formData,'新增')
                        const res = await nextApi.rawProductStorageAdd(this.formOption.formData)
                        this.$message.success(res.msg)
                        this.$emit("closeModal")
                    }
                }finally {
                    this.modalOption.loading = false;
                }
            }
        });
    }

    closeModal() {
        this.disabledEdit = false
        this.formOption.formData = {}
        this.$emit("closeModal");
    }
}
</script>
<style scoped lang="scss">
.container {
    padding: 0;
    .MR-10 {
        margin-right: 10px;
    }
    .inputs {
        width: 200px;
    }
    .inputs-with-qus{
        width: 173px;
    }
    .tool-bar {
        margin-bottom: 20px;

    }
    .table {
        margin-top: 20px;
    }
}
</style>
